<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('关于我')"></head>
<body class="m-opacity-mini">

  <!--导航-->
  <nav th:replace="_fragments :: menu(5)"></nav>

  <!--中间内容-->
  <div  class="m-container m-padded-tb-big animated fadeIn">
    <div class="ui container">

      <div class="ui stackable grid">
        <div class="eleven wide column">
          <div class="ui segment">
            <img th:src="@{/images/aboutMe.jpg}" alt="" class="ui rounded image">
          </div>
        </div>

        <div class="five wide column">
          <div class="ui top attached segment">
            <div class="ui header">关于我</div>
          </div>
          <div class="ui attached segment">
            <p class="m-text">一个java小白，啥都不会，啥都想弄，结果花了时间，收获很小，没办法咯，加油吧......</p>
            <p class="m-text">喜欢看动漫，喜欢耍，喜欢啥都不干</p>
            <p class="m-text">希望结识志趣相投的小伙伴(#^.^#).</p>
          </div>
          <div class="ui attached segment">
            <div class="ui orange basic left pointing label">编程</div>
            <div class="ui orange basic left pointing label">发呆</div>
            <div class="ui orange basic left pointing label">动漫</div>
            <div class="ui orange basic left pointing label">音乐</div>
          </div>
          <div class="ui attached segment">
            <div class="ui teal basic left pointing label m-margin-tb-tiny">ssm</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">springboot</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">mysql</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">html</div>
            <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
          </div>
          <div class="ui bottom attached segment">
            <a href="#" class="ui github circular icon button" data-content="Caterpillar128" data-position="bottom center"><i class="github icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="2462105615" data-position="bottom center"><i class="qq icon"></i></a>
          </div>

          <div class="ui wechat-qr flowing popup transition hidden">
            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" class="ui rounded image" style="width: 110px">
          </div>
        </div>
      </div>

    </div>
  </div>

  <br>
  <br>
  <!--底部footer-->
  <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
  </footer>


  <!--导入的script-->
  <th:block th:replace="_fragments :: script">
  </th:block>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.wechat').popup({
      popup : $('.wechat-qr'),
      position: 'bottom center'
    });
    $('.qq').popup();

  </script>
</body>
</html>